'use strict';

let Charts = require('../../commen/utils/wxcharts.js');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'http://img5.imgtn.bdimg.com/it/u=2513068450,997311685&amp;fm=26&amp;gp=0.jpg',
'http://img5.imgtn.bdimg.com/it/u=2513068450,997311685&amp;fm=26&amp;gp=0.jpg',
'http://img5.imgtn.bdimg.com/it/u=2513068450,997311685&amp;fm=26&amp;gp=0.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    
    duration: 1300,
    bg: '#C79C77',
    winWid: "",     //这是swiper要动态设置的高度属性
    // 滚动标题的字段
    marqueePace: 2,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marqueeDistance2: 0,
    marquee2copy_status: false,
    marquee2_margin: 40,
    size: 16,
    orientation: 'left',//滚动方向
    interval: 100,
    text: "有许多地方等你发现哦！",
    //
    
  },
pp:function(){
  wx.navigateTo({
    url: '../title/title?name=1',
  })
},
  kk: function () {
    wx.navigateTo({
      url: '../title/title?name=2',
    })
  },
  vv: function () {
    wx.navigateTo({
      url: '../title/title?name=3',
    })
  },
love: function () {
    wx.navigateTo({
      url: '../index/index',
    })
  },
  voteClick:function(event){
    var newsId = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../logs/news-detail/news-detail?newsId='+newsId,
    })
  },
  to: function (event) {
    var newsId = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../logs/love/love?newsId=' + newsId,
    })
  },
  onLoad: function onLoad() {
    var _this = this;
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    this.setData({
      winWid: winWid
    })
  
    // 获取canvas对象
    // mobile = wx.createCanvasContext('mobile')
    // letter = wx.createCanvasContext('letter')
    new Charts({
      animation: true,
      canvasId: 'canvas5',
      type: 'ring',
      extra: {
        ringWidth: 10,//圆环的宽度
        pie: {
          offsetAngle: -45//圆环的角度
        }
      },
      title: {
        name: '70%',
        color: '#7cb5ec',
        fontSize: 15
      },
      subtitle: {
        name: '水分',
        color: '#666666',
        fontSize: 15
      },
      series: [{
        name: '成交量1',
        data: 15,
        stroke: false
      }, {
        name: '成交量2',
        data: 35,
        stroke: false
      }],
      disablePieStroke: true,
      width: 120,
      height:80,
      dataLabel: false,
      legend: false,
      padding: 0
    });
  },


  // 页面渲染完成 
  onReady: function () {

    //心跳效果
    var circleCount = 0;
    // 心跳的外框动画 
    this.animationMiddleHeaderItem = wx.createAnimation({
      duration: 1000, // 以毫秒为单位 
      /** 
      * http://cubic-bezier.com/#0,0,.58,1 
      * linear 动画一直较为均匀 
      * ease 从匀速到加速在到匀速 
      * ease-in 缓慢到匀速 
      * ease-in-out 从缓慢到匀速再到缓慢 
      * 
      * http://www.tuicool.com/articles/neqMVr 
      * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过 
      * step-end 保持 0% 的样式直到动画持续时间结束  一闪而过 
      */
      timingFunction: 'linear',
      delay: 100,
      transformOrigin: '50% 50%',
      success: function (res) {
      }
    });
    setInterval(function () {
      if (circleCount % 2 == 0) {
        this.animationMiddleHeaderItem.scale(1.15).step();
      } else {
        this.animationMiddleHeaderItem.scale(1.0).step();
      }
      this.setData({
        animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()
      });
      circleCount++;
      if (circleCount == 1000) {
        circleCount = 0;
      }
    }.bind(this), 1000);



//云朵效果
    // 页面渲染完成
    // 实例化一个动画
    var that = this;
    var i = 0
    var ii = 0
    var animationData = wx.createAnimation({
      duration: 1000, // 默认为400   动画持续时间，单位ms
      timingFunction: 'ease-in-out',
      //transformOrigin: '4px 91px'
    });
    var animationCloudData = wx.createAnimation({
      duration: 1000, // 默认为400   动画持续时间，单位ms
      timingFunction: 'ease-in-out',
      //transformOrigin: '4px 91px'
    });
    // 顺序执行，当已经执行完上面的代码就会开启定时器
    // 循环执行代码
    //dotAnFun = setInterval(function () {});  
    /*setInterval(function () {
     // 动画脚本定义
     //animationData.rotate(6 * (++i)).step()
     //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();
     animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });
     // 更新数据
     that.setData({
      // 导出动画示例
      animationData: animationData.export(),
      //animationCloudData: animationCloudData.export(),    
     })
     ++i;
     console.log(i);
    }.bind(that), 2000);//循环时间 这里1000是1秒
    */
    //动画的脚本定义必须每次都重新生成，不能放在循环外
    animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
    // 更新数据
    that.setData({
      // 导出动画示例
      //animationData: animationData.export(),
      animationCloudData: animationCloudData.export(),
    })
    setInterval(function () {
      //动画的脚本定义必须每次都重新生成，不能放在循环外
      animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
      // 更新数据
      that.setData({
        // 导出动画示例
        //animationData: animationData.export(),
        animationCloudData: animationCloudData.export(),
      })
      ++ii;
      console.log(ii);
    }.bind(that), 10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错



  }, 


  onShow: function () {
    // 页面显示
    var vm = this;
    var length = vm.data.text.length * vm.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    vm.setData({
      length: length,
      windowWidth: windowWidth,
      marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
    });

    vm.run2();// 第一个字消失后立即从右边出现
  },
  run2: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance2 < vm.data.length) {
        // 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
        vm.setData({
          marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
          marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
        });
      } else {
        if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
          vm.setData({
            marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
          });
          clearInterval(interval);
          vm.run2();
        } else {
          clearInterval(interval);
          vm.setData({
            marqueeDistance2: -vm.data.windowWidth
          });
          vm.run2();
        }
      }
    }, vm.data.interval);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function onHide() {
    // TODO: onHide
  },


});

